<template>
  <div>
    <NavBar>
      <template v-slot:default> 商品详情</template>
    </NavBar>
    <!-- 内容 -->
    <van-image style="margin-top:50px" width="100%" :src="detail.cover_url" />
    <van-card
      style="text-align:left"
      :num="detail.stock"
      :price="detail.price + '.00'"
      :desc="detail.description"
      :title="detail.title"
    >
      <template #tags>
        <van-tag plain type="danger">新书</van-tag>
        <van-tag v-if="detail.is_recommend == 1" plain type="danger"
          >推荐</van-tag
        >
      </template>
      <template #footer>
        <van-button type="danger" @click="handleAddCart">加入购物车</van-button>
        <van-button type="warning" @click="goToCart">立即购买</van-button>
      </template>
    </van-card>
    <!-- 标签 -->
    <van-tabs v-model:active="active">
      <van-tab title="概述">
        <div class="content" v-html="detail.details"></div>
      </van-tab>
      <van-tab title="热评"
        ><div class="content" v-html="detail.details"></div
      ></van-tab>
      <van-tab title="相关图书"
        ><div class="content">
          <goods-list :currentType="like_goods" /></div
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import {
  onMounted,
  ref,
  reactive,
  computed,
  watchEffect,
  nextTick,
  toRefs,
} from "vue";
import NavBar from "../../components/common/navbar/NavBar";
import { getDetail } from "@/network/detail";
import { useRoute, useRouter } from "vue-router"; // 导入路由器
import { on } from "process";
import GoodsList from "@/components/content/goods/GoodsList"; // 4
import { addCart } from "@/network/cart";
import { Notify, Toast } from "vant";
import { useStore } from "vuex";
export default {
  name: "Detail",
  components: { NavBar, GoodsList },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    let id = ref(0);
    let book = reactive({
      detail: {},
      like_goods: [],
      comments: [],
    });
    onMounted(() => {
      id.value = route.query.id;
      getDetail(id.value).then((res) => {
        book.detail = res.goods;
        book.like_goods = res.like_goods;
        console.log(res);
      });
    });
    //添加购物车
    const handleAddCart = () => {
      addCart({ goods_id: book.detail.id, num: 1 }).then((res) => {
        if (res.status == 204 || res.status == 201) {
          console.log(res.status);
          Toast.success("添加成功");
          store.dispatch("updateCart");
        } else {
          Toast.success("下手晚了，商品已经没了");
        }
      });
    };
    //立即购买
    const goToCart = () => {
      addCart({ goods_id: book.detail.id, num: 1 }).then((res) => {
        if (res.status == 204 || res.status == 201) {
          console.log(res.status);
          Toast.success("添加成功,显示购物车");
          store.dispatch("updateCart");
          router.push({ path: "/shopcart" });
        } else {
          Toast.success("下手晚了，商品已经没了");
        }
      });
    };
    return {
      id,
      book,
      ...toRefs(book),
      handleAddCart,
      goToCart,
    };
  },
};
</script>
<style lang="scss" scoped>
.content {
  padding: 10px;
  margin-bottom: 50px;
  img {
    max-width: 100%;
    height: auto;
  }
}
</style>
